<template>
  <div class="configuredRule">
    <el-card shadow="hover" class="card-search">
      <el-row>
        <el-col :span="20">
          <div class="search_detail">
            <div class="search">
              <span class="span_name">名称：</span>
              <el-input v-model="state.params.realName" placeholder="请输入" clearable />
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
          <el-button type="danger" :icon="Delete" @click="reast">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="hover" class="card-main">
      <el-button type="primary" :icon="CirclePlusFilled" @click="addmore">新增</el-button>
      <div class="lists">
        <div class="list">
          <div class="lists-img">
            <img :src="require('@@/world.png')" alt="">
          </div>
          <div class="list-block1">
            <div class="list-txt1">名称：</div>
            <div class="list-block2">
              <span class="list-txt2">上传时间：</span>
              <el-button type="danger" :icon="Delete" circle @click="DeletetPdf" />
            </div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination background @current-change="changepage" layout="prev, pager, next" :total="state.totalPage" />
      </div>
    </el-card>
    <el-dialog :close-on-click-modal="false" v-model="state.dialogVisible" title="文档编辑" width="80%"
      :before-close="handleClose">
      <div class="inputa">
        <div style="border: 1px solid #ccc">
          <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
            :mode="mode" />
          <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
            :mode="mode" @onCreated="handleCreated" />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetForm()">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted, reactive } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { Delete, Search, CirclePlusFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const state = reactive({
  dialogVisible: false,
  dialogVisibleBjkb: true,
  params: {
    monthStatus: '',
    realName: '',
    roleId: '',
    time: ['', ''],
    startDate: '',
    endDate: '',
  },
})


// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('<p>hello</p>')

// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
  }, 1500)
})

const toolbarConfig = {}
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      server: 'http://60.174.207.65:9999/api/upload',
      headers: { Authorization: '9pOpepPbh89EvnD+fovZ61J6HsGHkS8TNBQIBwDb24eel8XvOPIde9ssvYCWlK2CoiHrNnse5JWSkys13yDf+xbIDrMZx1LzKlVwAEacILuS0xtetdtiQtV06EbVBVjA3lEzoDuoiViZ+syT05gPEusHthH1veQVmSEPKTVwIy9JnbIMkik+7NqKnkrV5HcWBKLNPQCOL1mZScp92elFgDunUBpOfL4eHiWHOOKWsZNrKiOOBFmPtFLlL51iidGBSxhU3LKvGZR4xOXxBtYIHyMi89pbR/F3dRUl8Mt3e9ASEwtgrdM+isuytZBYVp7mKKUWDHEOW8VmYJiU5IFQrJfirb7yZbbOT8HTPRoHi2FFV4AtkHStqsMGGT0Kml7o5hj17+uC19hneK2Gdk/wp5yyZWc4RQG+9op4DUckOneNC3UBwpwTW2i7/wk4Nt1Kf5bIMOBCbs7PfeyPGRLBO3WT2GkWbV1IMP3nEDDnHAO1F93bk8HBCwAFx6/iMa0lXAviYGyikAh6oBfDWubFekvZB32FT7/gQCR5iBzfJIZWu8IfKi86ENfLFXKOkDFiWUFrcpBfNgS314dqkzZk/bFPGepY8iazmeqNXjjxBZaoVnHfCRx1JCIVsGLZ3xPvjOSFyLQp0d1LZOIHe7ofTKTKskXORqn+nvMjuqKZe+oCwuyDpcOXLT6CM5K8XB9TZPkbPjca0RkmRr3y9cA6dH0BJ084KbRRyOl8OZ5amD0aAAlJ2eJeruq9IKfcNKhfez0jl56g8ZYQUgL4V51OYSnIlkGZyHJpkUXqWPuLMS7AOawziCazdyUXk+nP7lOdfpE/IqWBteptTrhvBQblKLuCFL3wQuEMHXSkcwZ5XG4pKsFTNCtOt45PX/LE7rAUNeGJrzLSHswyLho4zOyuLQ==' },
      fieldName: 'file',// 这里有个坑，如果返回的响应结果是没有上传文件，跟这里关系很大
      customInsert(res, insertFn) {
        if (res.code == 200) {
          let { url, alt, href } = res.data
          insertFn(url, alt, href)
        }
      }
    },
    uploadVideo: {
      server: 'http://60.174.207.65:9999/api/upload',
      headers: { Authorization: '9pOpepPbh89EvnD+fovZ61J6HsGHkS8TNBQIBwDb24eel8XvOPIde9ssvYCWlK2CoiHrNnse5JWSkys13yDf+xbIDrMZx1LzKlVwAEacILuS0xtetdtiQtV06EbVBVjA3lEzoDuoiViZ+syT05gPEusHthH1veQVmSEPKTVwIy9JnbIMkik+7NqKnkrV5HcWBKLNPQCOL1mZScp92elFgDunUBpOfL4eHiWHOOKWsZNrKiOOBFmPtFLlL51iidGBSxhU3LKvGZR4xOXxBtYIHyMi89pbR/F3dRUl8Mt3e9ASEwtgrdM+isuytZBYVp7mKKUWDHEOW8VmYJiU5IFQrJfirb7yZbbOT8HTPRoHi2FFV4AtkHStqsMGGT0Kml7o5hj17+uC19hneK2Gdk/wp5yyZWc4RQG+9op4DUckOneNC3UBwpwTW2i7/wk4Nt1Kf5bIMOBCbs7PfeyPGRLBO3WT2GkWbV1IMP3nEDDnHAO1F93bk8HBCwAFx6/iMa0lXAviYGyikAh6oBfDWubFekvZB32FT7/gQCR5iBzfJIZWu8IfKi86ENfLFXKOkDFiWUFrcpBfNgS314dqkzZk/bFPGepY8iazmeqNXjjxBZaoVnHfCRx1JCIVsGLZ3xPvjOSFyLQp0d1LZOIHe7ofTKTKskXORqn+nvMjuqKZe+oCwuyDpcOXLT6CM5K8XB9TZPkbPjca0RkmRr3y9cA6dH0BJ084KbRRyOl8OZ5amD0aAAlJ2eJeruq9IKfcNKhfez0jl56g8ZYQUgL4V51OYSnIlkGZyHJpkUXqWPuLMS7AOawziCazdyUXk+nP7lOdfpE/IqWBteptTrhvBQblKLuCFL3wQuEMHXSkcwZ5XG4pKsFTNCtOt45PX/LE7rAUNeGJrzLSHswyLho4zOyuLQ==' },
      fieldName: 'file',// 这里有个坑，如果返回的响应结果是没有上传文件，跟这里关系很大
      customInsert(res, insertFn) {
        if (res.code == 200) {
          let { url, alt, href } = res.data
          insertFn(url, alt, href)
        }
      }
    }
  }
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

const addmore = () => {
  state.dialogVisible = true
}

const resetForm = () => {
  state.dialogVisible = false
}

</script>

<style lang="scss">
.index-content {
  padding: 0 30px;
  margin-top: 30px;
}





.demo-pagination-block {
  margin: 30px 0;
}

.el-form-item__label {
  //  width: 68px;
  text-align: start;
}

.configuredRule {
  padding: 20px;

  .search_detail {
    display: flex;

    .search {
      margin-right: 10px;
      display: flex;
      align-items: center;

      .span_name {
        width: 110px;
        font-size: 16px;
      }
    }
  }

  .card-main {
    margin-top: 20px;
    height: calc(100vh - 200px);
    position: relative;

    .pagination {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
      text-align: right;
    }
  }
}

:deep(.el-calendar__body) {
  height: 100%;
}

:deep(.el-calendar-table) {
  height: 100%;
}

:deep(.el-calendar-day) {
  height: 100%;
}

.lists {
  margin-top: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .list {
    margin: 8px 1%;
    padding: 5px 5px;
    width: 230px;
    height: 230px;
    background: #F8F8F8;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    border: 1px solid #EAEAEA;
  }

  .lists-img {
    text-align: center;
    width: 100%;
    height: 127px;
    background: #FFFFFF;
    border-radius: 5px 5px 0px 0px;

    img {
      width: 88px;
    }
  }

  .list-block1 {
    margin-top: 5px;
    width: 100%;
    // height: 127px;
    background: #FFFFFF;
    border-radius: 5px 5px 0px 0px;
    padding: 5px 10px;

    .list-txt1 {
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      color: #333333;
    }

    .list-block2 {
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: space-between;

      .list-txt2 {
        font-size: 12px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        color: #A1A1A1;
      }
    }
  }


}
</style>